<template>
  <el-dialog title="批量移动分组" :model-value="showBatchMoveGroupDialog" width="460" @close="closeDialog"
    :close-on-click-modal="false">
    <el-form :model="formData">
      <el-form-item label="移动到分组：">
        <el-select v-model="formData.groupId" style="width: 300px">
          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id" />
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
        <el-button type="primary" :loading="submitLoading" @click="submit">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { getMaterialGroup, batchMoveGroup } from '@/api/materialManagement'

const props = defineProps({
  showBatchMoveGroupDialog: {
    type: Boolean
  },
  ids: {
    type: Array
  },
  fileType: {
    type: Number
  }
})

const emit = defineEmits(['closeDialog'])

interface GroupItem {
  id: string
  groupName: string
}

const formData = reactive({
  groupId: ''
})

const groupList = ref<GroupItem[]>([])
const submitLoading = ref(false)

function closeDialog() {
  emit('closeDialog', false)
}

async function getData() {
  const res = await getMaterialGroup({
    fileType: props.fileType
  })
  if (res.code === '00000') {
    groupList.value = res.data
  }
}

async function submit() {
  try {
    submitLoading.value = true
    const res = await batchMoveGroup({
      ids: props.ids,
      groupId: formData.groupId
    })
    if (res.code === '00000') {
      ElMessage.success('移动成功')
      emit('closeDialog', true)
    }
  } catch (e) {
  } finally {
    submitLoading.value = false
  }
}

onMounted(() => {
  getData()
})
</script>

<style scoped lang="scss"></style>
